<template>
	<view class="popupContent">
		<u-popup :round="16" :show="show" mode="center" @close="close" @open="open">
			<view class="popupBox">
				<view class="title">
					{{title}}
				</view>
				<view class="content" v-if="content.length>0">
					{{content}}
				</view>
				<view class="center">
					<view v-if="handleType === 'text'" class="textInfo">
						{{textInfo}}
					</view>
					<view v-else-if="handleType === 'iputnumber'" class="input_view">
						<u--input inputAlign="right" fontSize="17px" color="var(--subjectTextColor)" type="number"
							@clear="clearAll" @change="setInp" :value="inpText" :placeholder="placeholderText"
							border="none" clearable></u--input>
					</view>
					<view v-else class="input_view">
						<u--input :maxlength="maxlength" inputAlign="right" fontSize="17px" color="var(--subjectTextColor)"
							@clear="clearAll" @change="setInp" :value="inpText" :placeholder="placeholderText"
							border="none" clearable :type="inpType"></u--input>

					</view>
				</view>
				<view class="handleBtn" v-if="!footerSlot">
					<u-button v-show="!hideCancel" type="primary" :plain="true" color="var(--borderColor)"
						shape="circle" :hairline="true" @click="btnCancel">
						<text class="cancelText">{{$t('me.Cancel')}}</text>
					</u-button>
					<u-button type="primary" shape="circle" color="var(--subjectColor)" @click="btnConfirm">
						<text class="confirmText">{{$t('me.Confirm')}}</text>
					</u-button>
				</view>
				<view v-else>
					<slot></slot>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "DialogPopup",
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			title: {
				type: String,
				default: 'attention',
			},
			content: {
				type: String,
				default: '',
			},
			placeholderText: {
				type: String,
				default: '请输入',
			},
			handleType: {
				type: String,
				default: 'text',
			},
			hideCancel: {
				type: Boolean,
				default: false,
			},
			textInfo: {
				type: String,
				default: '',
			},
			inpText: {
				type: String,
				default: '',
			},
			cancelText: {
				type: String,
				default: '取消',
			},
			confirmText: {
				type: String,
				default: '确认',
			},
			footerSlot: { //底部插槽 
				type: Boolean,
				default: false
			},
			inpType:{
				type:String,
				default:'text'
			},
			maxlength:{
				type:String,
				default:'20'
			}
		},
		data() {
			return {
				input:'',
			}
		},
		methods: {
			close() {

			},
			open() {

			},
			clearAll() {
				this.$emit('clearAll')
			},
			setInp(e) {
				this.input = e
				this.$emit('setInp', e)
			},
			btnCancel() {
				this.$emit('btnCancel')
			},
			btnConfirm() {
				this.$emit('btnConfirm',this.input)
			}
		},
	}
</script>

<style scoped lang="scss">
	.popupContent {
		.popupBox {
			width: 300px;
			min-height: 201px;
			background-color: var(--moduleColor);
			border-radius: 16px;
			position: relative;
			padding: 16px;
			box-sizing: border-box;
		}

		.title {
			width: 100%;
			height: 44px;
			line-height: 44px;
			text-align: center;
			color: var(--subjectTextColor);
			font-weight: $uni-fw-700;
			font-size: $uni-fz-17;
		}

		.content {
			width: 100%;
			height: 44px;
			line-height: 21px;
			text-align: center;
			background: white;
			color: var(--subjectTextColor);
			font-weight: 400px;
			font-size: 14px;
		}

		.center {

			width: 100%;
			min-height: 40px;
			overflow: auto;
			margin: 16px 0;
			line-height: 21px;

			.textInfo {
				text-align: center;
				font-size: 14px;
				color: var(--subjectTextColor);
				line-height: 21px;
				font-weight: 400;
			}

			.input_view {
				position: relative;
				border-bottom: 1px solid var(--borderColor) !important;
				height: 41px !important;
				padding-top: 8px;
				box-sizing: border-box;

			}



		}

		.handleBtn {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.cancelText {
				color: var(--subjectColor);
				font-size: 17px;
			}

			.confirmText {
				color: $uni-color-white;
				font-size: 17px;
			}

			/deep/ button {
				width: 130px;
			}
		}
	}
</style>
